<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar leftIconSize="40" :autoBack="true" height="0px" bgColor="#f9f9f900"> </u-navbar>

		<!--背景图  -->
		<view
			style="background-image: url(https://pic.52112.com/180227/180227_87/o6wLBhidP1.jpg); width: 100%;height: 700rpx;">
			<!-- 	<u--image src="" width="100%"
				height="700rpx"></u--image> -->
		</view>
		<view class="meInfo">
			<u--image shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg" width="160rpx"
				height="160rpx"></u--image>
			<view style="z-index: 999;">
				<u--text lineHeight="60" align="center" size="30" bold text="齐尔西男子足球俱乐部"></u--text>
			</view>
			<view class="flex" style="z-index: 999;">
				<u--text prefixIcon="map-fill" lineHeight="60" color="#B8B6BE" align="center" size="22" bold
					text="广东省广州市"></u--text>
				<u--text prefixIcon="account" lineHeight="60" color="#B8B6BE" align="center" size="22" bold
					text="广东省广州市"></u--text>
			</view>

		</view>

		<!-- 内容 -->
		<view class="container">

			<!--球队相册  -->
			<view class="padding10-40">
				<view class="space-between padding15-0">
					<u--text color="#000000" size="30" text="球队相册"></u--text>
					<view>
						<u--text @click="toTeamPhoto()" suffixIcon="arrow-right" color="#888693" size="20" text="编辑"></u--text>
					</view>
				</view>
			</view>

			<!-- <scroll-view scroll-x style="width: 100%; height: auto;"> -->
				<view style="display: grid;grid-template-columns: repeat(5,1fr);gap: 30rpx;">
					<view :class="{ 'photoBox': true }" v-for="(item, index) in images"
						:key="index">
						<u--image :src="item.src"></u--image>
					</view>
				</view>

			<!-- </scroll-view> -->
			
			<!-- 申请加入球队 -->
			

<view class="inputBox padding10-30">
		

			<view @click="toMyBallGame()" class="space-between">
				<view class="captainBox">
					<view style="margin-right: 10%;">
						<u--image :showLoading="true" radius="20" src="https://cdn.uviewui.com/uview/album/1.jpg"
							width="30px" height="30px"></u--image>
					</view>

					<view style="width: 600rpx;">
						<u--text size="20" color="#B8B6BE" text="小路"></u--text>
						<u--text size="28" text="申请加入"></u--text>
					</view>
				</view>
				<view>
					<u--text size="28" text="水平: 大神"></u--text>
				</view>
			</view>
			<!-- 请求信息 -->
			<view class="padding15-0">
				<u--textarea placeholderClass="textarea-placeholder	" disabled  value="加入很牛" ></u--textarea>
			</view class="padding15-0">
			<view style="display: flex; justify-content: flex-end;">
				<view>
					<u-button :customStyle="{'width':'100rpx'}" type="primary" text="同意"></u-button>
				</view>
				<view style="margin-left: 20rpx;">
					<u-button :customStyle="{'width':'100rpx'}" color="#B8B6BE" type="primary" text="拒绝"></u-button>
				</view>
			</view>
		</view>

		<!-- 我的资料 -->

		<view class="inputBox padding10-30">
			<view class="space-between padding15-0">
				<u--text size="30" text="球队信息"></u--text>
				<view @click="toEditTeam()" class="flex">
					<u-icon size="30" color="#B8B6BE" name="chat"></u-icon>
					<u--text size="20" color="#B8B6BE" text="点击编辑"></u--text>
				</view>
			</view>
			
			<u-divider></u-divider>
			<view class="space-between padding15-0">
				<u--text size="30" text="平均年龄"></u--text>
				<view class="flex">
					<u--text size="20" color="#B8B6BE" text="28岁"></u--text>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="space-between padding15-0">
				<u--text size="30" text="球队人数"></u--text>
				<view class="flex">
					<u--text size="20" color="#B8B6BE" text="11人"></u--text>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="space-between padding15-0">
				<u--text size="30" text="地区"></u--text>
				<view class="flex">
					<u--text size="20" color="#B8B6BE" text="广东省广州市"></u--text>
				</view>
			</view>
			<u-divider></u-divider>
			<view class="space-between padding15-0">
				<u--text size="30" text="水平等级"></u--text>
				<view class="flex">
					<u--text size="20" color="#B8B6BE" text="笑趴菜"></u--text>
				</view>
			</view>
			<u-divider></u-divider>

			<view class="gameInfo padding15-0">
				<view class="padding10-30">
					<u--text size="20"
						text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
				</view>
			</view>
			<view class="flex">
				<view v-for="item in 3" style="height: 45rpx;" class="tag">暂未成局</view>
			</view>
		</view>

		<!-- 球队成员 -->
		<view class="inputBox padding10-30 ">
			<view class="space-between padding15-0">
				<u--text size="30" text="球队成员"></u--text>
				<view>
					<u--text size="20" color="#B8B6BE" text="位置"></u--text>
				</view>
			</view>
			<u-divider></u-divider>
			<view v-for="(itme,index) in 3" class="space-between">
				<view class="captainBox">
					<view style="margin-right: 10%;">
						<u--image :showLoading="true"  radius="10"
						src="https://cdn.uviewui.com/uview/album/1.jpg"
						 width="60rpx" height="60rpx"></u--image>
					</view>
					
						 <u--text size="28" text="广州球王"></u--text>
					 <view
					 	style="font-size: 20rpx; border-radius: 30rpx; color: black; padding: 10rpx; text-align: center; background: #4A43EC1A;">
					 	<text>队长</text>
					 </view>
				</view>
				<view class="flex">
					<view
						style="font-size: 25rpx; border-radius: 30rpx; color: black; padding: 10rpx; text-align: center; background: #4A43EC1A;">
						<text>队长</text>
					</view>
					<u-icon v-if="index !== 0" name="minus-circle"></u-icon>
				</view>
			</view>
		</view>
			

		</view>

		<!-- 足球日历 -->
		


	</view>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				images: [{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
				],
			}
		},
		methods: {
			// 跳转到消息
			toMessage() {
				uni.navigateTo({
					url: "messageList"
				})
			},
			// 跳转到我的球赛
			toMyBallGame() {
				uni.navigateTo({
					url: "myBallGame"
				})
			},
			// 跳转到球队相册
			toTeamPhoto(){
				uni.navigateTo({
					url: "/pages/team/teamPhoto"
				})
			},
			// 修改球队信息
			toEditTeam(){
				uni.navigateTo({
					url: "/pages/team/addTeam"
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.container {
		z-index: 999;
		width: 100%;
		height: auto;
		border-radius: 20px 20px 0px 0px;
		opacity: 1;
		background: #FEFEFF;
		padding-bottom: 100rpx;
	}

	.meInfo {
		margin-top: -71%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.messageBox {
		position: relative;
		width: 70%;
		height: auto;
		border-radius: 16rpx;
		opacity: 1;
		background: #5669FF;
		display: flex;
		align-items: center;
	}

	.inputBox {
		width: 80%;
		height: auto;
		border-radius: 16px;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 8px 25px 0px rgba(83, 89, 144, 0.07);
		margin: 6% auto;
		border: 1px solid #EEEEEE;
	}


	.teamInfoTag {
		margin-right: 0%;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 48%;
		border-radius: 16rpx;
		height: auto;
		padding: 3% 0;
		background-color: white;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 5px 20px 0px rgba(211, 209, 216, 0.3);
	}

	.addTeam {
		width: 100%;
		height: auto;
		background: #4A43EC;
		display: flex;
		justify-content: center;
		border-radius: 20rpx;
		min-height: 100rpx;
	}

	.ballBox {
		width: 90%;
		height: auto;
		border: 1rpx solid #EEEEEE;
		margin: 3% auto;
		border-radius: 16rpx;
	}

	.captainBox {
		
		width: 50%;
		display: flex;
		align-items: center;
	}

	.gameInfo {
		width: 100%;
		height: auto;
		background-color: #F2F3F5;
		margin: 2% auto;
		border-radius: 16rpx;
	}

	.oneBox {
		grid-row: 1/3;
		grid-column: 1/3;
	}
	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/deep/ .textarea-placeholder{
		border-radius: 30rpx;
	}
</style>